<template>
  <div style="display: flex; justify-content: flex-end">
    <el-button type="primary" @click="open">添加管理员</el-button>
  </div>
  <el-table :data="currentList" style="width: 100%">
    <el-table-column prop="adminname" label="管理员账号" />
    <el-table-column prop="role" label="角色">
      <!-- 作用域插槽 -->
      <template #default="scope">
        <el-tag v-if="scope.row.role === 1">管理员</el-tag>
        <el-tag v-if="scope.row.role !== 1" type="success">超级管理员</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="230">
      <template #default="scope">
        <el-button @click="edit(scope.row)">编辑</el-button>
        <el-popconfirm
          title="Are you sure to delete this?"
          @confirm="confirm(scope.row.adminid)"
        >
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    style="margin-top: 20px; justify-content: flex-end"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[5, 10, 20, 50]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

  <!-- 抽屉 -->
  <el-drawer v-model="show">
    <template #header>
      <h2 style="font-size: 16px">
        {{ type === "add" ? "添加管理员" : "编辑管理员" }}
      </h2>
    </template>
    <template #default>
      <div>
        <el-form :model="addForm" label-width="80px">
          <el-form-item label="账号">
            <el-input v-model="addForm.adminname" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="addForm.password" :disabled="type === 'edit'" />
          </el-form-item>
          <el-form-item label="权限">
            <el-select v-model="addForm.role" placeholder="Select">
              <el-option label="管理员" value="1" />
              <el-option label="超级管理员" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-tree
              :data="data"
              show-checkbox
              node-key="key"
              :props="defaultProps"
              :default-expand-all="true"
              :default-checked-keys="checkedList"
              @check="check"
              ref="treeRef"
            />
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button>取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script>
import {
  adminListApi,
  adminAddApi,
  adminRemoveApi,
  adminEditApi,
} from "@/api/index.js";
import { menuList } from "../components/Menu.vue";

export default {
  data() {
    return {
      tableData: [],
      // 每页几条
      pageSize: 10,
      // 当前第几页
      currentPage: 1,
      total: 0,
      show: false,
      addForm: {
        adminname: "",
        password: "",
        role: "",
        checkedKeys: [],
      },
      data: menuList,
      defaultProps: {
        children: "children",
        label: "title",
      },
      // type表示的是新增还是编辑
      type: "add",
      // 表示默认选中
      checkedList: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await adminListApi();
      // console.log(res);
      if (res) {
        this.tableData = res.data;
        this.total = res.data.length;
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 点击新增按钮
    open() {
      this.show = true;
      this.type = "add";
      this.addForm = {
        adminname: "",
        password: "",
        role: "",
        checkedKeys: [],
      };

      this.$nextTick(() => {
        // 树结构的默认选中是没有响应式的，需要调用setCheckedKeys去修改默认选中的内容
        // this.checkedList = [];
        this.$refs.treeRef.setCheckedKeys([]);
      });
    },
    check(checkedNodes, target) {
      this.addForm.checkedKeys = target.checkedKeys;
    },
    async submit() {
      // console.log(this.$refs.treeRef.getCheckedKeys());
      if (this.type === "add") {
        const res = await adminAddApi(this.addForm);
        if (res) {
          this.show = false;
          ElMessage({
            message: res.message,
            type: "success",
          });
          this.getList();
        }
      } else if (this.type === "edit") {
        const res = await adminEditApi(this.addForm);
        if (res) {
          this.show = false;
          ElMessage({
            message: res.message,
            type: "success",
          });
          this.getList();
        }
      }
    },
    async confirm(id) {
      const res = await adminRemoveApi({ adminid: id });
      if (res) {
        ElMessage({
          message: res.message,
          type: "success",
        });
        this.getList();
      }
    },
    // 点击编辑按钮
    edit(row) {
      this.show = true;
      this.type = "edit";
      console.log(row);
      this.addForm.adminname = row.adminname;
      this.addForm.role = row.role + "";
      this.checkedList = row.checkedKeys;
    },
  },
  computed: {
    currentList() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
};
</script>
